<template>
<div class="form-search"> 
 <a-form
    ref="formRef"
    name="dynamic_form_nest_item" 
    
  >
    <a-form-item name="area" label="类型">
        <a-select
        v-model:value="value"
        show-search
        placeholder="模型参数" 
       
        :options="options"
        :filter-option="filterOption"
        @focus="handleFocus"
        @blur="handleBlur"
        @change="handleChange"
      ></a-select>
    </a-form-item>
   
  </a-form>
  </div>
</template>
<script lang="ts" setup>
import type { SelectProps } from 'ant-design-vue';
import { ref } from 'vue';
const options = ref<SelectProps['options']>([
  { value: 'DSGFHGH', label: 'DSGFHGH' },
  { value: 'DSGFFGHGFJHJ', label: 'DSGFFGHGFJHJ' },
  { value: 'DSGFHGH', label: 'DSGFHGH' },
]);
const handleChange = (value: string) => {
  console.log(`selected ${value}`);
};
const handleBlur = () => {
  console.log('blur');
};
const handleFocus = () => {
  console.log('focus');
};
const filterOption = (input: string, option: any) => {
  return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};

const value = ref<string | undefined>(undefined);
</script>
<style lang="scss">
  .form-search{
    padding: 20px;
  }
</style>

